<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="商家提交申请" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="merchant-submits-apply">
			<view class="merchant-submits-applys">
				<view class="merchant-submits-apply-top">
					<view class="title">会员编号</view>
					<view class="number">{{ memberId }}</view>
					<view class="radio-box">
						<text class="radio-box-text">是否连锁店：</text>
						<label class="radio-one" @click="isChain = '0';companyName = ''">
							<radio value="0" :checked="isChain === '0'" color="#f00" style="transform:scale(0.7);" /><text>否</text>
						</label>
						<label class="radio-two" @click="isChain = '1'">
							<radio value="1" :checked="isChain === '1'" color="#f00" style="transform:scale(0.7);" /><text>是</text>
						</label>
					</view>
				</view>
				<view class="merchant-submits-apply-bottom">
					<view class="merchant-submits-apply-info" v-if="isChain === '1'">
						<text class="merchant-submits-apply-info-txt">公司名称</text>
						<view class="merchant-submits-apply-info-input">
							<input v-model="companyName" placeholder="请输入公司名称" class="merchant-submits-apply-info-input-input" placeholder-style="color:#CCCCCC" />
							<view v-if="companyName" @click="companyName = ''" class="merchant-submits-apply-info-input-close">×</view>
						</view>
					</view>
					<view class="merchant-submits-apply-info">
						<text class="merchant-submits-apply-info-txt">店铺名称</text>
						<view class="merchant-submits-apply-info-input">
							<input v-model="storeName" placeholder="请输入店铺名称" class="merchant-submits-apply-info-input-input" placeholder-style="color:#CCCCCC" />
							<view v-if='storeName' @click="storeName = ''" class="merchant-submits-apply-info-input-close">×</view>
						</view>
					</view>
					<view class="merchant-submits-apply-info">
						<text class="merchant-submits-apply-info-txt">联系人</text>
						<view class="merchant-submits-apply-info-input">
							<input v-model="contract" placeholder="请输入联系人" class="merchant-submits-apply-info-input-input" placeholder-style="color:#CCCCCC" />
							<view v-if="contract" @click="contract = ''" class="merchant-submits-apply-info-input-close">×</view>
						</view>
					</view>
					<view class="merchant-submits-apply-info">
						<text class="merchant-submits-apply-info-txt">联系电话</text>
						<view class="merchant-submits-apply-info-input">
							<input v-model="phone" placeholder="请输入联系电话" class="merchant-submits-apply-info-input-input" placeholder-style="color:#CCCCCC" />
							<view v-if="phone" @click="phone = ''" class="merchant-submits-apply-info-input-close">×</view>
						</view>
					</view>
					<view class="merchant-submits-apply-info">
						<text class="merchant-submits-apply-info-txt">行业</text>
						<view class="merchant-submits-apply-info-input">
							<picker v-if="(industry_array !== undefined) && industry_array.length" mode="selector" :value="industry_index" range-key="name" :range="industry_array" @change="industry_change">
								<view class="merchant-submits-apply-info-input-ts">{{ industry_array[industry_index].name }}</view>
							</picker>
						</view>
					</view>
					<view class="merchant-submits-apply-city">
						<view class="merchant-submits-apply-city-item">
							<text class="merchant-submits-apply-city-item-txt">省市区</text>
							<view v-if="label" @click="onClickOpenAddress" class="merchant-submits-apply-city-item-border">{{ label }}</view>
							<view v-else @click="onClickOpenAddress" class="merchant-submits-apply-city-item-border-h">请选择地址</view>
						</view>
					</view>
					<view class="merchant-submits-apply-info">
						<text class="merchant-submits-apply-info-txt">详细</text>
						<view class="merchant-submits-apply-info-input">
							<input v-model="address" placeholder="请输入详细地址" class="merchant-submits-apply-info-input-input" placeholder-style="color:#CCCCCC" />
							<view v-if="address" @click="address = ''" class="merchant-submits-apply-info-input-close">×</view>
						</view>
					</view>
				</view>
			</view>
			<view @click="onClickSubmitBtn" class="merchant-submits-apply-btn">提交入驻申请</view>
			<!-- 鬼也晓得我为什么放在外面，但是如果放在里面的话，会有BUG -->
			<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirmAddress" themeColor='#007AFF'></simple-address>
		</view>
	</view>
</template>

<script>
	import { config } from '@/utils/config.js'
	import { myMixin } from '@/utils/mixin.js'
	import simpleAddress from '@/components/simple-address/simple-address.nvue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		mixins: [myMixin],
		components: {
			simpleAddress,
			uniNavBar
		},
		onLoad() {
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				})
				uni.reLaunch({
					url: '../verificationcodelogin/verificationcodelogin'
				})
				return false
			}
			const memberId = uni.getStorageSync('memberId')
			if (!memberId) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				})
				setTimeout(() => {
					uni.removeStorageSync('role')
					uni.removeStorageSync('memberId')
					uni.removeStorageSync('cartList')
					uni.removeStorageSync('token')
					uni.removeStorageSync('openId')
					uni.redirectTo({
						url: '../login/login'
					})
				}, 777)
				return false
			}
			this.memberId = memberId
			this._getNavData() // 获取行业
		},
		data() {
			return {
				industry_index: 0,
				industry_array: [],
				isChain: '0',
				memberId: undefined,
				companyName: '',
				storeName: '',
				contract: '',
				phone: '',
				industryId: '',
				cityPickerValueDefault: [0, 0, 0],
				label: '',
				provinceId: '',
				cityId: '',
				areaId: '',
				province: '',
				city: '',
				area: '',
				address: ''
			}
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			onClickSubmitBtn() {
				if (this.isChain !== '0' && this.isChain !== '1') {
					uni.showToast({
						icon: 'none',
						title: '请先选择是否连锁店'
					})
					return false
				}
				if (this.isChain === '1') {
					if (!this.companyName) {
						uni.showToast({
							icon: 'none',
							title: '请填写公司名称'
						})
						return false
					}
				}
				if (!this.storeName) {
					uni.showToast({
						icon: 'none',
						title: '请填写店铺名称'
					})
					return false
				}
				if (!this.contract) {
					uni.showToast({
						icon: 'none',
						title: '请填写联系人'
					})
					return false
				}
				if (!this.phone) {
					uni.showToast({
						icon: 'none',
						title: '请填写电话'
					})
					return false
				}
				if (!this.industryId) {
					uni.showToast({
						icon: 'none',
						title: '请选择行业'
					})
					return false
				}
				if (!this.label) {
					uni.showToast({
						icon: 'none',
						title: '请选择省市区'
					})
					return false
				}
				if (!this.address) {
					uni.showToast({
						icon: 'none',
						title: '请选择详细地址'
					})
					return false
				}
				const obj = {}
				obj.isChain = this.isChain
				if (this.companyName) {
					obj.companyName = this.companyName
				}
				if (this.storeName) {
					obj.storeName = this.storeName
				}
				if (this.contract) {
					obj.contract = this.contract
				}
				if (this.phone) {
					obj.phone = this.phone
				}
				if (this.industryId) {
					obj.industryId = this.industryId
				}
				if (this.provinceId) {
					obj.provinceId = this.provinceId
				}
				if (this.province) {
					obj.province = this.province
				}
				if (this.cityId) {
					obj.cityId = this.cityId
				}
				if (this.city) {
					obj.city = this.city
				}
				if (this.areaId) {
					obj.areaId = this.areaId
				}
				if (this.area) {
					obj.area = this.area
				}
				if (this.address) {
					obj.address = this.address
				}
				uni.showLoading({
					title: '保存中'
				})
				uni.request({
					url: `${config.api_base_url}member/merchant_apply`,
					method: 'PUT',
					header: {
						'AUTH': 'ROBOT ' + uni.getStorageSync('token'),
						'Content-Type': 'application/json'
					},
					data: obj,
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							uni.showToast({
								icon: 'none',
								title: '提交成功'
							})
							setTimeout(() => {
								uni.navigateBack({})
							}, 777)
						} else {
							uni.showToast({
								icon: 'none',
								title: status.msg
							})
						}
					}),
					fail: ((res) => {
						console.log(res)
						uni.showToast({
							icon: 'none',
							title: '提交失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.hideLoading()
					})
				})
			},
			onClickOpenAddress() {
				this.$refs.simpleAddress.open()
			},
			onConfirmAddress(e) {
				this.label = e.label
				this.provinceId = e.provinceCode
				this.cityId = e.cityCode
				this.areaId = e.areaCode
				this.province = e.provinceName
				this.city = e.cityName
				this.area = e.areaName
			},
			_getNavData() {
				uni.showLoading({
					title: '加载中'
				})
				uni.request({
					url: `${config.api_base_url}merchant/industry/index`,
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.industry_array = data
							this.industryId = this.industry_array[0].id
						} else {
							this.industry_array = []
						}
					}),
					fail: (() => {
						this.industry_array = []
					}),
					complete: (() => {
						uni.hideLoading()
					})
				})
			},
			industry_change(e) {
				this.industry_index = e.detail.value
				this.industryId = this.industry_array[this.industry_index].id
			}
		}
	}
</script>
<style>
	page {
		background: #F5F5F5;
	}
</style>
<style scoped>
	.merchant-submits-apply {
		padding: 15rpx;
		box-sizing: border-box;

	}

	.merchant-submits-applys {
		background: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
	}

	.merchant-submits-apply-top {
		border-bottom: 2rpx solid #EEEEEE;
	}

	.title {
		font-size: 30rpx;
		color: #333;
		line-height: 42rpx;
		font-weight: 600;
	}

	.number {
		font-size: 28rpx;
		color: #333;
		line-height: 40rpx;
	}

	.radio-box {
		padding: 12rpx 0rpx 20rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.radio-box-text {
		font-size: 30rpx;
		color: #333;
		line-height: 60rpx;
		font-weight: 600;
		float: left;
		display: block;
		margin-right: 10rpx;
	}

	.radio-one {
		color: #333333;
		font-size: 26rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-right: 60rpx;
		float: left;
	}

	.radio-one text {
		margin-top: 2rpx;
		float: left;
	}

	.radio-one radio {
		margin-right: 10rpx;
		float: left;
	}

	.radio-two {
		color: #333333;
		font-size: 26rpx;
		height: 60rpx;
		line-height: 60rpx;
		float: left;
	}

	.radio-two text {
		float: left;
		margin-top: 2rpx;
	}

	.radio-two radio {
		margin-right: 10rpx;
		float: left;
	}

	.merchant-submits-apply-bottom {}

	.merchant-submits-apply-info {}

	.merchant-submits-apply-info-txt {
		font-size: 28rpx;
		color: #000000;
		line-height: 70rpx;
		font-weight: 600;
		margin-right: 10rpx;

	}

	.merchant-submits-apply-info-input {
		width: 100%;
		height: 80rpx;
		border-radius: 12rpx;
		border: 2rpx solid rgb(221, 221, 221);
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.merchant-submits-apply-info-input-input {
		padding: 0;
		margin: 0;
		outline: none;
		border: none;
		width: calc(100% - 60rpx);
		height: 100%;
		box-sizing: border-box;
		padding-left: 22rpx;
		font-size: 30rpx;
		line-height: 80rpx;
	}

	.merchant-submits-apply-info-input-close {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #C6C6C6;
		line-height: 30rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.merchant-submits-apply-info-input uni-picker {
		padding: 0;
		margin: 0;
		outline: none;
		border: none;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding-left: 22rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		position: relative;
	}

	.merchant-submits-apply-info-input uni-picker::after {
		content: "";
		position: absolute;
		right: 20rpx;
		top: 50%;
		width: 20rpx;
		height: 20rpx;
		border-left: 5rpx solid #C6C6C6;
		border-top: 5rpx solid #C6C6C6;
		transform: translate3d(0, -50%, 0) rotateZ(225deg);
		-webkit-transform: translate3d(0, -50%, 0) rotateZ(225deg);
		margin-top: -4rpx;
	}
	
	.merchant-submits-apply-info-input picker {
		padding: 0;
		margin: 0;
		outline: none;
		border: none;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding-left: 22rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		position: relative;
	}
	
	.merchant-submits-apply-info-input picker::after {
		content: "";
		position: absolute;
		right: 20rpx;
		top: 50%;
		width: 20rpx;
		height: 20rpx;
		border-left: 5rpx solid #C6C6C6;
		border-top: 5rpx solid #C6C6C6;
		transform: translate3d(0, -50%, 0) rotateZ(225deg);
		-webkit-transform: translate3d(0, -50%, 0) rotateZ(225deg);
		margin-top: -4rpx;
	}

	.merchant-submits-apply-city {
		display: flex;
		flex-direction: column;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.merchant-submits-apply-city-item {
		width: 100%;
	}

	.merchant-submits-apply-city-item-txt {
		font-size: 28rpx;
		color: #000000;
		line-height: 70rpx;
		font-weight: 600;
		margin-right: 10rpx;
	}

	.merchant-submits-apply-city uni-picker {
		font-size: 28rpx;
		width: 192rpx;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 12rpx;
		border: 2rpx solid rgb(221, 221, 221);
		padding: 0rpx 10rpx;
		position: relative;
	}

	.merchant-submits-apply-city-item-border {
		font-size: 28rpx;
		width: 100%;
		box-sizing: border-box;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 12rpx;
		border: 2rpx solid rgb(221, 221, 221);
		padding: 0rpx 10rpx;
		position: relative;
	}

	.merchant-submits-apply-city-item-border-h {
		font-size: 28rpx;
		width: 100%;
		box-sizing: border-box;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 12rpx;
		border: 2rpx solid rgb(221, 221, 221);
		padding: 0rpx 10rpx;
		position: relative;
		color: #CCCCCC;
	}

	.merchant-submits-apply-city uni-picker::after {
		content: "";
		position: absolute;
		right: 20rpx;
		top: 50%;
		width: 20rpx;
		height: 20rpx;
		border-left: 5rpx solid #C6C6C6;
		border-top: 5rpx solid #C6C6C6;
		transform: translate3d(0, -50%, 0) rotateZ(225deg);
		-webkit-transform: translate3d(0, -50%, 0) rotateZ(225deg);
		margin-top: -4rpx;
	}

	.merchant-submits-apply-btn {
		width: 660rpx;
		height: 82rpx;
		background: rgba(240, 34, 48, 1);
		border-radius: 14rpx;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 82rpx;
		margin: 40rpx auto 0 auto;
	}
</style>
